<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-left">
        <div class="welcome-text">
          <h2>欢迎回来</h2>
          <p>登录以继续访问系统</p>
        </div>
        <div class="decoration-circles">
          <div class="circle circle-1"></div>
          <div class="circle circle-2"></div>
          <div class="circle circle-3"></div>
        </div>
      </div>
      <div class="login-right">
        <div class="login-form-container">
          <h3>系统登录</h3>
          <el-form
            ref="formRef"
            :model="loginForm"
            :rules="rules"
            class="login-form"
          >
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                placeholder="请输入用户名"
                :prefix-icon="User"
              />
            </el-form-item>
            
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                :prefix-icon="Lock"
                @keyup.enter="handleLogin"
              />
            </el-form-item>
            
            <div class="remember-forgot">
              <el-checkbox v-model="rememberMe">记住我</el-checkbox>
              <a href="#" class="forgot-link">忘记密码？</a>
            </div>
            
            <el-form-item>
              <el-button
                :loading="loading"
                type="primary"
                class="login-button"
                @click="handleLogin"
              >
                {{ loading ? '登录中...' : '登录' }}
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import type { LoginRequest } from '@/api/user'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const loading = ref(false)
const formRef = ref<FormInstance>()
const rememberMe = ref(false)

const loginForm = reactive<LoginRequest>({
  username: '',
  password: ''
})

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ]
}

const handleLogin = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        loading.value = true
        const res = await userStore.login(loginForm)
        if (res.code === 200) {
          ElMessage.success('登录成功')
          // 获取重定向地址或默认跳转到首页
          const redirect = route.query.redirect as string
          router.push(redirect || '/')
        }
      } catch (error) {
        console.error('Login error:', error)
        ElMessage.error('登录失败')
      } finally {
        loading.value = false
      }
    }
  })
}
</script>

<style lang="less" scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  
  .login-box {
    display: flex;
    width: 900px;
    height: 600px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.8s ease;

    .login-left {
      position: relative;
      width: 40%;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: white;
      overflow: hidden;

      .welcome-text {
        position: relative;
        z-index: 1;
        animation: slideUp 0.8s ease;
        
        h2 {
          font-size: 2.5em;
          margin-bottom: 10px;
        }
        p {
          font-size: 1.1em;
          opacity: 0.9;
        }
      }

      .decoration-circles {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        .circle {
          position: absolute;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.1);
          animation: float 6s ease-in-out infinite;

          &.circle-1 {
            width: 200px;
            height: 200px;
            top: -50px;
            right: -50px;
            animation-delay: 0s;
          }

          &.circle-2 {
            width: 150px;
            height: 150px;
            bottom: 50px;
            left: -50px;
            animation-delay: 2s;
          }

          &.circle-3 {
            width: 100px;
            height: 100px;
            bottom: -30px;
            right: 50px;
            animation-delay: 4s;
          }
        }
      }
    }
    
    .login-right {
      width: 60%;
      padding: 40px;
      display: flex;
      align-items: center;

      .login-form-container {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        animation: slideIn 0.8s ease;

        h3 {
          font-size: 1.8em;
          color: #333;
          margin-bottom: 30px;
          text-align: center;
        }

        .login-form {
          :deep(.el-form-item) {
            margin-bottom: 25px;
            animation: fadeInUp 0.5s ease;
            animation-fill-mode: both;

            &:nth-child(1) { animation-delay: 0.1s; }
            &:nth-child(2) { animation-delay: 0.2s; }
            &:nth-child(3) { animation-delay: 0.3s; }
            &:nth-child(4) { animation-delay: 0.4s; }
          }

          .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;

            :deep(.el-checkbox) {
              .el-checkbox__label {
                color: #606266;
              }
            }

            .forgot-link {
              color: #764ba2;
              text-decoration: none;
              font-size: 14px;
              transition: all 0.3s ease;
              
              &:hover {
                text-decoration: underline;
                opacity: 0.8;
              }
            }
          }

          .login-button {
            width: 100%;
            height: 45px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            font-size: 16px;
            transition: all 0.3s ease;
            
            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 5px 15px rgba(118, 75, 162, 0.3);
            }

            &:active {
              transform: translateY(0);
            }
          }
        }
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

// 响应式设计
@media screen and (max-width: 768px) {
  .login-container {
    .login-box {
      width: 100%;
      flex-direction: column;
      height: auto;

      .login-left {
        width: 100%;
        padding: 30px;
        
        .welcome-text {
          text-align: center;
          
          h2 {
            font-size: 2em;
          }
        }
      }

      .login-right {
        width: 100%;
        padding: 30px;
      }
    }
  }
}
</style>